<template lang="html">
  <div class="main-page" id="store-page">
    <!-- 标题 -->
    <!-- <van-nav-bar class="main-header" title="余额提现" :left-arrow="true" :fixed="true" :z-index="11" @click-left="onClickLeft"/> -->
    <nav-bar :title="'余额提现'" @goBack="onClickLeft"/>
    <!-- 主体内容 -->
    <div class="main-content has-main-tabbar has-header-space">
      <!-- <div v-if="isShow" class="indep-notice-bar">
        <img class="indep-notice-bar__warning" src="https://mjmh.meijiameihuo.com/wechat/images/icon/notice-bar-warning.png" alt="">
        <div class="indep-notice-bar__text">
          <span @click="openMsg">如果您对您的余额有任何疑问，请联系客服 〉〉</span>
        </div>
        <img class="indep-notice-bar__close" @click="onHidden" src="https://mjmh.meijiameihuo.com/wechat/images/icon/notice-bar-close.png" alt="">
      </div> -->
      <div class="withdrawal-wrap">
      <div style="position:relative;width:100%;">
          <img style="width:100%;height:150px;display:block" src="https://mjmh.meijiameihuo.com/wechat/images/shopping_cart/withdrawal_bg.png" alt="">
          <div class="is-reflect">可提现金额</div>
          <img class="img-reflect" style="width:15px;height:15px;" @click="openWhat" src="https://mjmh.meijiameihuo.com/wechat/images/shopping_cart/what.png" alt="">
          <div class="ok-withdrawal">￥{{this.real_balance ? this.real_balance : 0}}</div>
          <div class="reflect">
            <router-link to="/merber/applyReflect">
              <span class="now-reflect">申请提现</span>
          </router-link>
          </div>
        </div>
        <van-tabs type="line" background="#373636" color="#DDB074">
          <van-tab title="提现记录">
            <div v-if="record_onLoad || recordList.length">
              <van-list v-model="record_onLoad" :finished="record_finished" finished-text="没有更多了" @load="getRecordInfoMore">
                <div v-for="(i, index) in recordList" :index="index"  v-bind:key="index">
                  <router-link :to="{path: '/merber/incomeDetails/', query: {title: '提现',type: i.cash_type === 1?'微信提现':'银行卡提现', create_at: i.create_at,serial_no: i.serial_no,cash_result: i.cash_result, amount: i.amount,cash_status: i.cash_status === 4 ?'已到账': i.cash_status === 5 ? '提现失败' : '提现审核中', card_no: i.bank_card_nu, bank_name: i.bank_name}}" >
                     <div class="record_list">
                       <span class="date">{{i.create_at}}</span>
                       <div class="record_item">{{i.bank_name}}{{i.bank_card_nu ? '（'+i.bank_card_nu.substr(-4)+'）' : '暂无银行卡信息'}}</div>
                       <div class="recodd_money">
                           ¥{{i.amount}} <br/>
                           <span :class="i.cash_status !== 4 ? 'red' : ''">{{i.cash_status === 4 ?'已到账': i.cash_status === 5 ? '提现失败' : '提现审核中'}}</span>
                       </div>
                       <div class="reason" v-if="i.respon">{{i.respon}}</div>
                     </div>
                  </router-link>
                </div>
              </van-list>
            </div>
            <not-data v-if="!record_onLoad && !recordList.length" icon="icon_2" txt="暂无数据~"></not-data>
          </van-tab>
          <van-tab title="收入明细">
            <div v-if="income_onLoad || incomeList.length">
              <van-list v-model="income_onLoad" :finished="income_finished" finished-text="没有更多了" @load="getIncomeInfoMore">
                <div v-for="(item, ind) in incomeList" :index="ind" v-bind:key="ind">
                  <router-link :to="{path: '/merber/incomeDetails/', query: {title: '收入',type: item.train_type, create_at: item.create_at,serial_no: '',cash_type: '', amount: item.amount, product_name: item.item_name,}}">
                    <div class="income_list">
                      <div class="item_name">{{item.item_name}}</div>
                      <div class="date">{{item.create_at}}</div>
                      <div class="money">+{{item.amount}} <p>{{item.train_type}}</p></div>
                    </div>
                  </router-link>
                </div>
              </van-list>
            </div>
            <not-data v-if="!income_onLoad && !incomeList.length" icon="icon_2" txt="暂无数据~"></not-data>
          </van-tab>
        </van-tabs>
      </div>
        <van-dialog id="van-dialog1"/>
        <van-toast id="van-toast" />
        <!-- <van-dialog v-model="show_tips" title="提现规则" confirm-button-text="我知道了" :lockScroll="true">
          <div class="reflect_tips">
            <div class="tips_content">
              <p>已经确认收货的T+9的所有商品返利</p>
              <p>2、每位会员申请提现前必须完成绑定银行卡，否则无法申请提现；</p>
              <p>3、可提现金额≤提现余额；</p>
              <p>4、平台将每周三做为付款日（法定节假日顺延），每周一为审核日，审核上周日所有的提现；审核时间为1个工作日；付款会在审核成功后2个工作日内完成，，即：上周一00:00至上周日的23:59期间的所有提现，将在本周三完成付款；本周一00:00至本周日23:59的提现申请，将在下周三完成付款；（款项到账时间为实时到账（由于各大银行可能出现延迟，具体情况以各大银行实际到账为准）；</p>
              <p>5、暂免每位会员的银行手续费，美家美货公司会代扣第三方公司所提供委托申报个税的税费和结算服务费，共计10%，实际到账金额为提现审批金额的90%；</p>
              <p>6、不支持境外开具的银行账户，不支持持境外护照在境内开具的银行账户；</p>
              <p>7、美家美货佣金提现规则的解释权归深圳美家美货信息技术有限公司拥有。</p>
            </div>
          </div>
        </van-dialog> -->
    </div>
  </div>
</template>

<script>
import NotData from '@/components/global/not-data.vue'
import NavBar from '@/components/global/nav-bar.vue'
// NotData
export default {
  components: { NavBar, NotData },
  data () {
    return {
      active: 1,
      reflect_amount: null,
      real_balance: null,
      isShow: false,
      show_tips: false,
      page: {
        totalPage: null,
        currentPage: 0,
        pageSize: 10
      },
      userData: {
        user_info: {
        },
        asset_info: {

        }
      },
      incomeList: [
      ],
      recordList: [
      ],
      nothing: false,
      record_finished: false,
      record_onLoad: true,
      income_finished: false,
      income_onLoad: true,
      in_page: 0,
      re_page: 0
    }
  },
  created () {
    this.getUserInfo()
    this.getRecordInfo()
    this.getIncomeInfo()
  },
  mounted () {
    window['getUpload'] = () => {
      this.getUserInfo()
      this.getRecordInfo('ref')
      this.getIncomeInfo('ref')
    }
  },
  methods: {
    onClickLeft () {
      console.log(111111)
      this.$router.go(-1)
    },
    onHidden () {
      this.isShow = false
    },
    openWhat () {
      this.$toast({
        duration: 4000,
        message: '已经确认收货的T+9的所有商品返利'
      })
    },
    openMsg: function () {
      console.log('打开客服')
    },
    getUserInfo () { // 获取用户信息
      var data = {}
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'profile', data, method: 'get' }).then((resp) => { // 请求成功
          console.log(resp)
          if (resp.return_code === '0000') {
            if (resp.data) {
              this.userData = resp.data
              this.real_balance = resp.data.asset_info.real_balance
              this.user_id = resp.data.user_info.user_id
            }
            console.log(this.userData)
            console.log('请求成功')
          } else {
            console.log('请求错误')
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    getIncomeInfoMore () {
      this.in_page = this.in_page + 1
      this.getIncomeInfo()
    },
    getRecordInfoMore () {
      this.re_page = this.re_page + 1
      this.getRecordInfo()
    },
    getIncomeInfo (type) { // 获取收入列表
      var data = {
        type: 'all_gains',
        page: this.in_page
      }
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'user_gains', params: data, method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            if (resp.data) {
              if (type === 'ref') {
                this.incomeList = resp.data.all_gains
              } else {
                this.incomeList = this.incomeList.concat(resp.data.all_gains)
              }
            }
            if (resp.data.all_gains.length < 10) {
              this.income_finished = true
            }
            this.income_onLoad = false
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          this.income_finished = true
          this.income_onLoad = false
          reject(error)
        })
      })
    },
    getRecordInfo (type) { // 获取提现记录列表
      this.nothing = false
      var data = {
        time: 'all',
        sort: 'create_at',
        page: this.re_page
      }
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'user_cash_record', params: data, method: 'get' }).then((res) => { // 请求成功
          this.$toast.clear()
          if (res.return_code === '0000') {
            if (res.data && res.data.list.length !== 0) {
              if (type === 'ref') {
                this.recordList = res.data.list
              } else {
                this.recordList = this.recordList.concat(res.data.list)
              }
            } else {
              this.nothing = true
            }
            if (res.data.list.length < 10) {
              this.record_finished = true
            }
            this.record_onLoad = false
          } else {
          }
          resolve(res)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.main-page{height: 100%;}
.main-content{height: 100%;}
.withdrawal-wrap{text-align:center;margin-bottom:10px;height: 100%; }
.withdrawal{color:#666;font-size:15px;margin-bottom:15px}
.ok-withdrawal{position: absolute!important;top:68px;left:15px;margin-top:5px;padding-right:90px;color:#ddb074;font-size:31px}
.notice_h{height:calc(100vh - 96px - 50px - 63px - 20px)}
.income-list{
  background-color: #ffffff;
  padding: 20px 15px;
  font-weight:bold;
}
.income-time{
  color:#999999;font-size:13px;margin-top:5px;text-align:left;
}
.reflect{
  position: absolute!important;
  top:85px;
  right:15px;
}
.now-reflect{
  color:#ffffff;font-size:11px;background-image:linear-gradient(90deg, #E9D1A7,#BF9865, #BF9865);padding:6px 8px;margin-left:50px;margin-top:8px; border-radius: rem(3);
}
.is-reflect{
  position:absolute;top:40px;left:15px;color:#FFFFFF;font-size:14px;
}
.img-reflect{
  position:absolute;top:42px;left:100px;
}
.indep-notice-bar {
  position: relative;
  background: #FDF7ED;
  padding: 4px 35px;
}

.indep-notice-bar__warning {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
}

.indep-notice-bar__text {
  min-height: 17px;
  line-height: 17px;
  font-size: 12px;
  color: #CB9956;
}

.indep-notice-bar__close {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
}

.reflect_tips {
  font-size: 13px;
  padding: 15px 15px 0;
  font-family:'Courier New', Courier, monospace;
}
.tips_content {
  max-height: 50vh;
  overflow: scroll;
}

.record_list {
  margin-bottom: 5px;
  background: #fff;
  padding: 15px;
  text-align: left;
  color: #999999;
  position: relative;
}
.record_list .date {
  font-size: 13px;
}
.record_list .record_item {
  font-size: 15px; color: #17273A; margin-top: 15px;

}
.record_list .recodd_money {
  position: absolute; right: 15px; top: 14px; text-align: right; font-size: 18px; color: #E91F3F;
  line-height: 25px;
}
.record_list .recodd_money span {
  color: #17273A; font-size: 14px;
}
.record_list .recodd_money .red {
  color: #E91F3F;
}
.record_list .reason {
  padding-top: 15px; margin-top: 15px; border-top: 1px solid #E5E5E5; color: #E91F3F; font-size: 12px;
}

.income_list {
  margin-bottom: 5px;
  background: #fff;
  padding: 15px;
  text-align: left;
  color: #999999;
  position: relative;
}
.income_list .item_name {
  font-size: 15px; color: #17273A;
  max-width: 250px; height: 42px; line-height: 21px;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.income_list .date {
  margin-top: 5px; font-size: 13px;
}
.income_list .money {
  position: absolute; right: 15px; top: 17px;
  font-size: 18px; color: #E91F3F;
  text-align: right;
}
.income_list .money p{
  font-size: 14px; margin-top: 10px;
}
</style>
